import React, { Component } from 'react';
import { View, Text, ImageBackground, StatusBar, TouchableOpacity } from 'react-native';
import { pxToDp } from "../../utils/stylesKits";
import IconFont from "../IconFont";
import { NavigationContext } from "@react-navigation/native";

class Index extends Component {
    static contextType = NavigationContext;

    render() {
        // goBack()
        return (
            <View>
                <StatusBar
                    backgroundColor="transparent"
                    translucent={true}
                />
                <ImageBackground
                    source={require('../../res/headbg.png')}
                    style={{ height: pxToDp(80), paddingTop: pxToDp(30), flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingLeft: pxToDp(10), paddingRight: pxToDp(10) }}
                >
                    <TouchableOpacity
                        onPress={this.context.goBack}
                        style={{ width: pxToDp(80), flexDirection: 'row', alignItems: 'center', marginTop: pxToDp(4) }}>
                        <IconFont style={{ color: '#fff', fontSize: pxToDp(14) }} name="iconfanhui" />
                        <Text style={{ color: '#fff', fontSize: pxToDp(14) }}>返回</Text>
                    </TouchableOpacity>
                    <Text style={{ color: '#fff', fontSize: pxToDp(20), fontWeight: 'bold' }}>{this.props.title}</Text>
                    <Text
                        onPress={this.props.onRightPress || function () { }}
                        style={{ width: pxToDp(80), color: '#fff', textAlign: 'right', marginTop: pxToDp(4), fontSize: pxToDp(14) }}>{this.props.rightText}</Text>
                </ImageBackground>
            </View>
        );
    }
}

export default Index;